<template>
  <div class="data_picker">
    <h1>DatePicker 日期选择器</h1>
    <p>选择或输入日期，支持年、月、日期等类型，支持选择范围。</p>
    <h2>基础用法</h2>
    <DatePicker
      type="date"
      placeholder="选择日期"></DatePicker>
    <DatePicker
      type="daterange"
      placement="bottom-end"
      placeholder="选择日期"></DatePicker>
    <p>设置属性 <code>type</code> 为 <code>date</code> 或 <code>daterange</code> 分别显示选择单日和选择范围类型。</p>
    <p>设置属性 <code>placement</code> 可以更改选择器出现的方向，与 <code>Poptip</code> 和 <code>Tooltip</code> 配置一致，支持 12 个方向。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;DatePicker
          type=&quot;date&quot;
          placeholder=&quot;选择日期&quot;&gt;&lt;/DatePicker&gt;
        &lt;DatePicker
          type=&quot;daterange&quot;
          placement=&quot;bottom-end&quot;
          placeholder=&quot;选择日期&quot;&gt;&lt;/DatePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>快捷方式</h2>
    <DatePicker
      type="date"
      :options="options1"
      placeholder="选择日期"></DatePicker>
    <DatePicker
      type="daterange"
      :options="options2"
      placement="bottom-end"
      placeholder="选择日期"></DatePicker>
    <p>设置属性 <code>options</code> 对象中的 <code>shortcuts</code> 可以设置快捷选项，详见示例代码。</p>
    <p>其中 <code>value</code> 为函数，必须返回一个日期，如果是 <code>daterange</code> 类型，需要返回一个数组。 <code>value</code> 接收任何正确的日期格式</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;DatePicker
          type=&quot;date&quot;
          :options=&quot;options1&quot;
          placeholder=&quot;选择日期&quot;&gt;&lt;/DatePicker&gt;
        &lt;DatePicker
          type=&quot;daterange&quot;
          :options=&quot;options2&quot;
          placement=&quot;bottom-end&quot;
          placeholder=&quot;选择日期&quot;&gt;&lt;/DatePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data() {
          return {
            options1: {
              shortcuts: [
                {
                  text: '今天',
                  value () {
                    return new Date();
                  },
                  onClick: (picker) => {
                    console.log('点击了今天');
                  }
                },
                {
                  text: '昨天',
                  value () {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    return date;
                  },
                  onClick: (picker) => {
                    console.log('点击了昨天');
                  }
                },
                {
                  text: '一周前',
                  value () {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    return date;
                  },
                  onClick: (picker) => {
                    console.log('点击了一周前');
                  }
                }
              ]
            },
            options2: {
              shortcuts: [
                {
                  text: '最近一周',
                  value () {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    return [start, end];
                  }
                },
                {
                  text: '最近一个月',
                  value () {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    return [start, end];
                  }
                },
                {
                  text: '最近三个月',
                  value () {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    return [start, end];
                  }
                }
              ]
            }
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>日期格式</h2>
    <DatePicker
      :value="value1"
      format="yyyy年MM月dd日"
      type="date"
      placeholder="选择日期"></DatePicker>
    <DatePicker
      :value="value2"
      format="yyyy/MM/dd"
      type="daterange"
      placement="bottom-end"
      placeholder="选择日期"></DatePicker>
    <p>设置属性 <code>format</code> 可以改变日期的显示格式。</p>
    <p>注意，<code>format</code> 只是改变显示的格式，并非改变 <code>value</code> 值。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;DatePicker
          :value=&quot;value1&quot;
          format=&quot;yyyy年MM月dd日&quot;
          type=&quot;date&quot;
          placeholder=&quot;选择日期&quot;&gt;&lt;/DatePicker&gt;
        &lt;DatePicker
          :value=&quot;value2&quot;
          format=&quot;yyyy/MM/dd&quot;
          type=&quot;daterange&quot;
          placement=&quot;bottom-end&quot;
          placeholder=&quot;选择日期&quot;&gt;&lt;/DatePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data() {
          return {
            value1: '2016-01-01',
            value2: ['2016-01-01', '2016-02-15']
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>日期时间选择</h2>
    <DatePicker
      type="datetime"
      placeholder="选择日期和时间"></DatePicker>
    <br><br>
    <DatePicker
      type="datetime"
      format="yyyy-MM-dd HH:mm"
      placeholder="选择日期和时间（不含秒）"></DatePicker>
    <br><br>
    <DatePicker
      type="datetimerange"
      placeholder="选择日期和时间"></DatePicker>
    <br><br>
    <DatePicker
      type="datetimerange"
      format="yyyy-MM-dd HH:mm"
      placeholder="选择日期和时间（不含秒）"></DatePicker>
    <p>设置属性 <code>type</code> 为 <code>datetime</code> 或 <code>datetimerange</code> 可以选择时间。</p>
    <p>设置 <code>format</code> 并且忽略秒，可以只设置小时和分钟维度。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;DatePicker
          type=&quot;datetime&quot;
          placeholder=&quot;选择日期和时间&quot;&gt;&lt;/DatePicker&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;DatePicker
          type=&quot;datetime&quot;
          format=&quot;yyyy-MM-dd HH:mm&quot;
          placeholder=&quot;选择日期和时间（不含秒）&quot;&gt;&lt;/DatePicker&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;DatePicker
          type=&quot;datetimerange&quot;
          placeholder=&quot;选择日期和时间&quot;&gt;&lt;/DatePicker&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;DatePicker
          type=&quot;datetimerange&quot;
          format=&quot;yyyy-MM-dd HH:mm&quot;
          placeholder=&quot;选择日期和时间（不含秒）&quot;&gt;&lt;/DatePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>年和月</h2>
    <DatePicker
      type="year"
      placeholder="选择年"></DatePicker>
    <DatePicker
      type="month"
      placeholder="选择月"></DatePicker>
    <p>设置属性 <code>type</code> 为 <code>year</code> 或 <code>month</code> 可以使用选择年或月的功能。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;DatePicker
          type=&quot;year&quot;
          placeholder=&quot;选择年&quot;&gt;&lt;/DatePicker&gt;
        &lt;DatePicker
          type=&quot;month&quot;
          placeholder=&quot;选择月&quot;&gt;&lt;/DatePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>不可选日期</h2>
    <DatePicker
      type="date"
      :options="options3"
      placeholder="选择日期"></DatePicker>
    <DatePicker
      type="date"
      :options="options4"
      placeholder="选择日期"></DatePicker>
    <p>设置属性 <code>options</code> 对象中的 <code>disabledDate</code> 可以设置不可选择的日期。</p>
    <p> <code>disabledDate</code> 是函数，参数为当前的日期，需要返回 <code>Boolean</code> 是否禁用这天。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;DatePicker
          type=&quot;date&quot;
          :options=&quot;options3&quot;
          placeholder=&quot;选择日期&quot;&gt;&lt;/DatePicker&gt;
        &lt;DatePicker
          type=&quot;date&quot;
          :options=&quot;options4&quot;
          placeholder=&quot;选择日期&quot;&gt;&lt;/DatePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data() {
          return {
            options3: {
              disabledDate (date) {
                return
              }
            },
            options4: {
              disabledDate (date) {
                const disabledDay = date.getDate();
                return disabledDay === 15;
              }
            }
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>手动控制组件</h2>
    <DatePicker
      :open="open"
      :value="value3"
      confirm
      type="date"
      @on-change="handleChange"
      @on-clear="handleClear"
      @on-ok="handleOk">
      <a href="javascript:void(0)" style="text-decoration:none;" @click="handleClick">
        <Icon type="icon-date"></Icon>
        <template v-if="value3 === ''">选择日期</template>
        <template v-else>{{ value3 }}</template>
      </a>
    </DatePicker>
    <p>对于一些定制化的场景，可以使用 <code>slot</code> 配合参数 <code>open</code> 及事件来手动控制组件的显示状态，详见示例和 API。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;DatePicker
          :open=&quot;open&quot;
          :value=&quot;value3&quot;
          confirm
          type=&quot;date&quot;
          @on-change=&quot;handleChange&quot;
          @on-clear=&quot;handleClear&quot;
          @on-ok=&quot;handleOk&quot;&gt;
          &lt;a href=&quot;javascript:void(0)&quot; style=&quot;text-decoration:none;&quot; @click=&quot;handleClick&quot;&gt;
            &lt;Icon type=&quot;icon-date&quot;&gt;&lt;/Icon&gt;
            &lt;template v-if=&quot;value3 === ''&quot;&gt;选择日期&lt;/template&gt;
            &lt;template v-else&gt;{{ value3 }}&lt;/template&gt;
          &lt;/a&gt;
        &lt;/DatePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data() {
          return {
            open: false,
            value3: ''
          }
        },
        methods: {
          handleClick () {
            this.open = !this.open;
          },
          handleChange (date) {
            this.value3 = date;
          },
          handleClear () {
            this.open = false;
          },
          handleOk () {
            this.open = false;
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>尺寸</h2>
    <DatePicker size="large" type="date" placeholder="选择日期"></DatePicker>
    <DatePicker size="small" type="date" placeholder="选择日期"></DatePicker>
    <p>通过设置属性 <code>size</code> 为 <code>large</code> 或 <code>small</code> 可以调整选择器尺寸为大或小，默认不填为中。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;DatePicker size=&quot;large&quot; type=&quot;date&quot; placeholder=&quot;选择日期&quot;&gt;&lt;/DatePicker&gt;
        &lt;DatePicker size=&quot;small&quot; type=&quot;date&quot; placeholder=&quot;选择日期&quot;&gt;&lt;/DatePicker&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>DatePicker props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>DatePicker events</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>
</template>
<script>
import Vue from 'vue'

export default {
  data () {
    return {
      open: false,
      value1: '2016-01-01',
      value2: ['2016-01-01', '2016-02-15'],
      value3: '',
      options1: {
        shortcuts: [
          {
            text: '今天',
            value () {
              return new Date()
            },
            onClick: (picker) => {
              console.log('点击了今天')
            }
          },
          {
            text: '昨天',
            value () {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              return date
            },
            onClick: (picker) => {
              console.log('点击了昨天')
            }
          },
          {
            text: '一周前',
            value () {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              return date
            },
            onClick: (picker) => {
              console.log('点击了一周前')
            }
          }
        ]
      },
      options2: {
        shortcuts: [
          {
            text: '最近一周',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            }
          },
          {
            text: '最近一个月',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            }
          },
          {
            text: '最近三个月',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              return [start, end]
            }
          }
        ]
      },
      options3: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      options4: {
        disabledDate (date) {
          const disabledDay = date.getDate()
          return disabledDay === 15
        }
      },
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'type',
          explain: '显示类型，可选值为 date、daterange、datetime、datetimerange、year、month',
          type: 'String',
          default: 'date'
        },
        {
          attribute: 'value',
          explain: '日期，可以是 JavaScript 的 Date',
          type: 'Date',
          default: '-'
        },
        {
          attribute: 'format',
          explain: '日期格式，d, dd, M, MM, MMM, MMMM, yyyy的组合。',
          type: 'String',
          default: 'MMMM/dd/yyyy'
        },
        {
          attribute: 'placement',
          explain: '日期选择器出现的位置，可选值为top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end',
          type: 'String',
          default: 'bottom-start'
        },
        {
          attribute: 'placeholder',
          explain: '占位文本',
          type: 'String',
          default: '空'
        },
        {
          attribute: 'options',
          explain: '选择器额外配置，比如不可选日期与快捷选项',
          type: 'Object',
          default: '-'
        },
        {
          attribute: 'confirm',
          explain: '是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'open',
          explain: '手动控制日期选择器的显示状态，true 为显示，false 为收起。',
          type: 'Boolean',
          default: 'null'
        },
        {
          attribute: 'size',
          explain: '尺寸，可选值为large和small或者不设置',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'disabled',
          explain: '是否禁用选择器',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'clearable',
          explain: '是否显示清除按钮',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'readonly',
          explain: '完全只读，开启后不会弹出选择器，只在没有设置 open 属性下生效',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'editable',
          explain: '文本框是否可以输入，只在没有使用 slot 时有效',
          type: 'Boolean',
          default: 'true'
        }
      ],
      tableColumn1: [
        {
          title: '事件名称',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData1: [
        {
          attribute: 'on-change',
          explain: '日期发生变化时触发',
          callback: '已经格式化后的日期，比如 2016-01-01'
        },
        {
          attribute: 'on-open-change',
          explain: '弹出日历和关闭日历时触发',
          callback: 'true | false'
        },
        {
          attribute: 'on-ok',
          explain: '在 confirm 模式下有效，点击确定按钮时触发',
          callback: '-'
        },
        {
          attribute: 'on-clear',
          explain: '在 confirm 模式或 clearable = true 时有效，在清空日期时触发',
          callback: '-'
        }
      ]
    }
  },
  created () {
    this.bus = new Vue()
  },
  methods: {
    handleClick () {
      this.open = !this.open
    },
    handleChange (date) {
      this.value3 = date
    },
    handleClear () {
      this.open = false
    },
    handleOk () {
      this.open = false
    }
  }
}
</script>
<style lang="less" scoped>
h1 {
  font-size: 18px;
}
h2 {
  font-size: 14px;
  margin-bottom: 10px;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 5px 0;
}
</style>
